<template>
  <!--会员费用设置组件 -->
  <div class="change_admin">
    <el-dialog
      :title="title"
      class="gl_dialog_TitleLine"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form ref="hotelForm" class="gl_form_mini" :model="vo" :rules="hotelSettingsVO_Rules" label-width="80px" label-position="right" style="padding-right: 30px;">
        <el-row :gutter="20">
          <!-- 上传酒店图片 -->
          <el-col class="form_item" style="height: 70px;">
            <el-form-item label="酒店图片" prop="imageUrl">
              <el-input v-show="false" v-model.trim="vo.imageUrl" />
              <photo-cropper-dialog
                ref="imageUrlPhotoCropper"
                auto-crop-width="400px"
                auto-crop-height="400px"
                :fixed-number="[400, 400]"
                :enlarge="1"
                @photoCropperSave="imgUrlPhotoCropperSave"
              />
              <div style="width: 50px; height: 50px;" :class="{ upload_game_img: true, border: !vo.imageUrl }" @click="openPhotoCropper('imageUrl')">
                <img v-if="vo.imageUrl" style="width: 50px; height: 50px;" class="show_img" :src="getStaticFileUrl(vo.imageUrl)" alt="">
                <i v-else class="el-icon-plus" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="酒店名称" prop="name">
              <el-input v-model="vo.name" placeholder="请输入酒店名称" size="mini" clearable />
            </el-form-item>
            <el-form-item label="酒店地址" prop="address">
              <el-input v-model="vo.address" placeholder="请输入酒店地址" size="mini" clearable />
            </el-form-item>
            <el-form-item label="房型" prop="roomType">
              <el-input v-model="vo.roomType" placeholder="请输入酒店房型" size="mini" clearable />
            </el-form-item>
            <el-form-item label="入住时间" prop="startTime">
              <el-date-picker v-model="vo.startTime" type="datetime" style="width: 100%" placeholder="请选择入住时间" />
            </el-form-item>
            <el-form-item label="离店时间" prop="endTime">
              <el-date-picker v-model="vo.endTime" type="datetime" style="width: 100%" placeholder="请选择入住时间" />
            </el-form-item>
            <el-form-item label="含餐" prop="foods">
              <el-row>
                <el-col :span="24">
                  <el-select v-model="hasFoods" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-col>
              </el-row>
              <el-row v-if="hasFoods">
                <el-col :span="24" class="gl_mt_10">
                  <template v-for="(item, index) in foodsList">
                    <el-checkbox :key="index" v-model="item.value">{{ item.name }}</el-checkbox>
                  </template>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="费用" prop="price">
              <el-row type="flex" align="middle">
                <el-col :span="22"><el-input-number v-model="vo.price" :precision="2" :min="0" :controls="false" placeholder="请输入酒店价格" size="mini" clearable style="width:100%" /></el-col>
                <el-col :span="2" align="center">元</el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="房间数量" prop="roomCount">
              <el-input-number v-model="vo.roomCount" placeholder="请输入房间数量" style="width:100%" :controls="false" :precision="0" :min="0" size="mini" clearable />
            </el-form-item>
            <el-form-item label="备注" prop="comment">
              <el-input v-model="vo.comment" type="textarea" :rows="2" placeholder="请填写备注信息" size="mini" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close()">取消</el-button>
        <el-button type="primary" size="mini" @click="saveNew('hotelForm')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { HotelSettingsVO_Rules } from '@/lib/validate/train/expenses/index.js';
import { SiSTKWTrainCreateTrainningHotelInput } from '@/lib/form/train/swaggerForm.js';
import photoCropperDialog from './photoCropperDialog';
import { FormatDate } from '@/lib/index.js';
export default {
  name: 'Fee',
  components: {
    photoCropperDialog
  },
  data() {
    return {
      vo: new SiSTKWTrainCreateTrainningHotelInput(),
      hasFoods: false, // 是否含餐
      options: [
        {
          value: false,
          label: '否'
        },
        {
          value: true,
          label: '是'
        }
      ],
      foodsList: [
        {
          code: 'includeBreakfast',
          value: false,
          name: '早餐'
        },
        {
          code: 'includeLunch',
          value: false,
          name: '午餐'
        },
        {
          code: 'includeDinner',
          value: false,
          name: '晚餐'
        }
      ],
      hotelSettingsVO_Rules: new HotelSettingsVO_Rules(),
      title: '', // 表单表头
      dialogVisible: false,
      inputDataName: ''// 获取表单框内输入的名称，判断其唯一性
    };
  },
  watch: {
    // 监听表单窗口状态如果关闭则清除提示信息
    dialogVisible(val) {
      if (!val) {
        this.$refs['hotelForm'].resetFields();
        this.vo = new SiSTKWTrainCreateTrainningHotelInput();
        this.foodList = [
          {
            code: 'includeBreakfast',
            value: false,
            name: '早餐'
          },
          {
            code: 'includeLunch',
            value: false,
            name: '午餐'
          },
          {
            code: 'includeDinner',
            value: false,
            name: '晚餐'
          }
        ];
        this.hasFoods = false;
      }
    }
  },
  methods: {
    // 获取数据
    freshData() {
    },
    open(row) {
      if (row) {
        this.title = '编辑';
        this.vo = JSON.parse(JSON.stringify(row));
        this.vo.price = this.formatMoney(this.vo.price);
        this.vo.startTime = new Date(this.vo.startTime);
        this.vo.endTime = new Date(this.vo.endTime);
        if (this.vo.includeBreakfast === true || this.vo.includeLunch === true || this.vo.includeDinner === true) {
          this.hasFoods = true;
          this.foodsList.map(item => {
            if (item.code === 'includeBreakfast') {
              item.value = this.vo.includeBreakfast;
            } else if (item.code === 'includeLunch') {
              item.value = this.vo.includeLunch;
            } else if (item.code === 'includeDinner') {
              item.value = this.vo.includeDinner;
            }
          });
        }
      } else {
        this.title = '新增';
      }
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    openPhotoCropper(code) {
      this.$refs[code + 'PhotoCropper'].open(this.vo[code]);
    },
    // 图片回显
    imgUrlPhotoCropperSave(fileUrl) {
      this.$set(this.vo, 'imageUrl', fileUrl.tempUrl);
    },
    // 点击确定进行添加或者编辑的操作
    saveNew(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _vo = JSON.parse(JSON.stringify(this.vo));
          _vo.startTime = FormatDate(_vo.startTime, 'yyyy-MM-dd HH:mm:ss');
          _vo.endTime = FormatDate(_vo.endTime, 'yyyy-MM-dd HH:mm:ss');
          if (_vo.startTime <= _vo.endTime) {
            if (this.hasFoods) {
              this.foodsList.map(item => {
                _vo[item.code] = item.value;
              });
            } else {
              this.foodsList.map(item => {
                _vo[item.code] = false;
              });
            }
            // 处理价格数据
            _vo.price = this.yuanToFen(_vo.price);
            console.log('this.vo', _vo);
            if (this.title === '编辑') {
              this.$emit('editTabelData', _vo);
            } else {
              this.$emit('pushTabelData', _vo);
            }
          } else {
            this.$message({
              message: '入住时间不得大于离店时间',
              type: 'error',
              showClose: true
            });
          }
        }
      });
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    },
    // 将元转化为分
    yuanToFen(moneyStr) {
      const _moneyStr = String(moneyStr);
      const yuan = Number(_moneyStr.split('.')[0]) || 0;
      const fen = Number(_moneyStr.split('.')[1]) || 0;
      return yuan * 100 + fen;
    }
  }
};
</script>

